    <template>
    	<view class="content">
    		<view class="index">

    			<scroll-view scroll-x="true" :scroll-into-view="scrollIntoIndex" class="scroll-content">
    				<view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index"
    					@tap="changeTab(index)" style="border-bottom: 1px solid #f0f0f0;margin-top: 5rpx;">
    					<text :class="topBarIndex===index?'f-active-color':'f-color'">{{item.name}}</text>
    				</view>
    			</scroll-view>
    			<scroll-view scroll-y="true">
    				<view>
    					<view v-show="topBarIndex <= 1? true:false">
    						<view class="prompt">
    							<p style="margin-left: 10rpx; color: red;">温馨提示：请在订单生成后五分钟内支付<!-- 已锁定号源，请您尽快支付 -->，超时系统将自动取消订单！</p>
    						</view>
    						<view class="font">待付款 ：</view>
    						<view class="box_A" v-for="(p,index) of $store.state.Visit" :key="p.index">
    							<view class="box_B">
    								<view class="box_B_1">
    									<h4 class="box_B_2">挂号订单 ({{p.name}})</h4>
    									<h4 style="color: #f46c6c;float: right;" class="box_B_2">{{p.state == 2? '待支付':'已支付'}}</h4>
    								</view>
    								<view style="border-top:1px solid #f5f5f5;margin:10rpx 5rpx;"></view>
    								<view class="box_B_3">
    									<!-- <view>流水号：<view style="color: black;display: inline;">{{p.serial_numble}}</view>
    									</view> -->
    									<view>就诊患者：
    										<view style="color: black;display: inline;">{{p.name}}</view>
    									</view>
    									<view>就诊卡号：
    										<view style="color: black;display: inline;">{{p.card_id}}</view>
    									</view>
    									<view>就诊医生：
    										<view style="color: black;display: inline;">{{p.doctor_name}}</view>
    									</view>
    									<!-- <view>就诊机构：{{p.institution}}</view> -->
    									<view>预约时间：
    										<view style="color: black;display: inline;">{{p.time}}</view>
    									</view>
										<view>订单号：
											<view style="color: black;display: inline;">{{p.order_number}}</view>
										</view>
    									<view class="box_B_3_1">金额<i style="color: red;">{{p.amount}}</i>￥</view>
    								</view>
    							</view>
    							<view style="text-align: center;">
    								<view class="butn " style="background-color: #f46c6c;" @click="cancel(p,index)">取消预约</view>
    								<view class="butn " style="background-color: #5bc724;" @click="pay(p,index)">立即支付</view>
    							</view>
								<view class="">{{aaa}}</view>
    						</view>
    					</view>
						<view v-show="topBarIndex > 1? true:false">
							<view class="nothing">没有更多了</view>
						</view>
    				</view>
    			</scroll-view>
    		</view>
    	</view>
    </template>
    <script>
		import wx from 'jweixin-module'
    	export default {
    		data() {
    			return {
					aaa:null,
    				// 选中的索引
    				topBarIndex: 0,
    				// 顶栏跟随的索引id值
    				scrollIntoIndex: 'top0',
    				//内容模块的高度值
    				clentHeight: 0,
    				navIndex: 0,
    				// 顶栏数据
    				swiper: 'home_data',
    				keyword: '',
    				topBar: [{
    						name: '全部'
    					},
    					{
    						name: '待付款'
    					},
    					{
    						name: '挂号/预约'
    					},
    					{
    						name: '在线复诊'
    					},
    					{
    						name: '药品'
    					},
    					{
    						name: '理疗'
    					}

    				],
    				patient: [],
    				Visit: [],
    				Doctor: [{
    						head: "头像",
    						name: "张三",
    						keshu_1: '中医科',
    						Doc: '副主任医师',
    						numble: '1233',
    						Be_good: ['感冒', '咳嗽'],
    					},
    					{
    						head: "头像",
    						name: "张",
    						keshu_1: '中医科',
    						Doc: '医师',
    						numble: '33',
    						Be_good: ['感冒', '咳嗽', 'ccc'],
    					},
    					{
    						head: "头像",
    						name: "三",
    						keshu_1: '中医科',
    						keshu_2: '',
    						Doc: '主任医师',
    						numble: '76',
    						Be_good: ['感冒', '咳嗽', '发烧', 'dddd'],
    					},
    				],
    				Medicine: [{
    						Headers: 'aa',
    						name: '盐水',
    						price: '123'
    					},
    					{
    						Headers: 'aa',
    						name: '盐水',
    						price: '123'
    					},
    					{
    						Headers: 'aa',
    						name: '盐水',
    						price: '123'
    					}
    				],
    				Online: [{
    						name: '张三',
    						head: '../../static/logo.png',
    						introduce: 'asdasdas',
    						patient: 'aa',
    						time: '23',
    						good: '11',
    						price: '90',
    					},
    					{
    						name: '李四',
    						head: '../../static/logo.png',
    						introduce: 'g阿萨德小册子',
    						patient: 'bb',
    						time: '34',
    						good: '99',
    						price: '90',
    					}
    				],
    				Logistics: [{
    						id: 0,
    						Image: '../../static/logo.png',
    						name: 'aa',
    						time: '6',
    						sell: '344553',
    						price_1: '345',
    						price_2: '9999',
    					},
    					{
    						id: 1,
    						Image: '../../static/logo.png',
    						name: 'bb',
    						time: '9',
    						sell: '986333',
    						price_1: '123',
    						price_2: '999',
    					},
    				],
    			}
    		},
    		onReady() {
    	// 		let view = uni.createSelectorQuery().select(".home_data");
    	// 		view.boundingClientRect(data => {
    	// 			this.clentHeight = data.height + 40;
					// console.log('1111111',data);
    	// 		}).exec();
    		},
			mounted(){
				// wx.config({
				//     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				//     appId: 'wx27291c11023cadcc', // 必填，公众号的唯一标识
				//     timestamp: , // 必填，生成签名的时间戳
				//     nonceStr: '', // 必填，生成签名的随机串
				//     signature: '',// 必填，签名
				//     jsApiList: [chooseWXPay] // 必填，需要使用的JS接口列表
				// });
				// uni.request({
				// 	url:'http://124.223.168.50:8000/test/order/save/',
				// 	method:'POST',
				// 	data:{
				// 		open_id:this.$store.state.open_id
				// 	},
				// 	success: (res) => {
				// 		console.log(res)
				// 	}
				// })
				uni.request({
					url:'http://124.223.168.50:8000/test/order/create/',
					data:{
						open_id:this.$store.state.open_id
					},
					success: (res) => {
						console.log(res)
						this.$store.state.Visit = res.data
						console.log(this.$store.state.Visit);
					}
				})
			},
    		methods: {
				cancel(e,b) {
					// const now = new Date()
					// const date = now.getHours()
					// console.log(date);
					console.log(e);
					console.log(b);
					uni.showModal({
						title:'提示',
						content:'是否取消预约',
						success: (res) => {
							if(res.confirm){
								uni.request({
									url:'http://124.223.168.50:8000/test/order/cancel/',
									method:'POST',
									data:{
										order_id:e.id,
										open_id:this.$store.state.open_id
									},
									success: (res) => {
										console.log(res);
										this.$store.state.Visit = this.$store.state.Visit.filter((item, index) => index !== b);
									}
								})
							}
						}
					})
				},
				pay(e,b){
					uni.request({
						url:'http://124.223.168.50:8000/weixin/wx_pay_js/',
						method:'POST',
						data:{
							open_id:this.$store.state.open_id,
							amount:e.amount,
							order_number:e.order_number
						},
						success: (res) => {
							console.log(res);
							// this.aaa = res
							const crypto = require('crypto');
							const params = {
							  appId: 'wx27291c11023cadcc',
							  timeStamp: res.data.data.timeStamp, // 注意大小写
							  nonceStr: res.data.data.nonceStr,
							  package: res.data.data.package,
							  signType: 'MD5',
							};
							console.log(res.data.data.package);
							const stringA = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
							const stringSignTemp = `${stringA}&key=2003925lxx2003925lxxasdfghjklqwe`; // 这里的 key 是商户平台设置的密钥，需要替换为你自己的密钥
							const sign = crypto.createHash('md5').update(stringSignTemp, 'utf8').digest('hex').toUpperCase();
							const parser = new DOMParser();
							const xml = parser.parseFromString(sign, 'text/xml');
							console.log(sign);
							WeixinJSBridge.invoke(
							      'getBrandWCPayRequest', {
							         "appId":"wx27291c11023cadcc",     //公众号ID，由商户传入     
							         "timeStamp":res.data.data.timeStamp,         //时间戳，自1970年以来的秒数     
							         "nonceStr":res.data.data.nonceStr, //随机串     
							         "package":res.data.data.package,     
							         "signType":"MD5",         //微信签名方式：     
							         "paySign":res.data.data.paySign //微信签名 
							      },
							      function(res){
									  console.log(res);
									  this.aaa = res
							      if(res.err_msg == "get_brand_wcpay_request:ok" ){
							      } 
							});
						}
					})
				},
    			changeTab(index) {
    				if (this.topBarIndex == 1) {
    					
    				}
    				this.topBarIndex = index
					console.log(this.topBarIndex)
    				this.scrollIntoIndex = 'top' + index
    			},

    			onChangeTab(e) {
    				this.changeTab(e.detail.current)
    			},

    			search() {
    				console.log('搜索关键字：', this.keyword)
    				// 在这里可以执行搜索操作，比如向后端发送请求获取搜索结果
    			}
    		},
    		computed: {

    		}
    	}
    </script>

    <style lang="scss">
    	.scroll-content {
    		width: 100%;
    		height: 80rpx;
    		white-space: nowrap;
    	}

    	.scroll-item {
    		display: inline-block;
    		padding: 10rpx 30rpx;
    		font-size: 32rpx;
    	}

    	.f-active-color {
    		color: #0048d8;
    		padding: 10rpx 0;
    		border-bottom: 6rpx solid #0048d8;
    	}

    	.font {
    		padding-left: 10rpx;
    		;
    		margin: 25rpx 0;
    		background-color: #87cfff;
    		box-shadow: 5rpx 5rpx 1rpx 8rpx #87cfff;
    		font-size: 28rpx;
    		height: 70rpx;
    		line-height: 70rpx;
    		color: #595959;
    	}

    	.index {
    		width: 100%;

    		.chart {
    			width: 120rpx;
    			text-align: center;
    			line-height: 120rpx;
    			border-radius: 40rpx;
    			background-color: #f46c6c;
    			height: 120rpx;
    		}

    		.chart_2 {
    			height: 60rpx;
    			width: 120rpx;
    			text-align: center;
    			line-height: 60rpx;
    		}
    	}

    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}

    	.prompt {
    		background-color: #4ca9ff;
    		// margin: 18rpx;
    		height: 85rpx;
    		line-height: 85rpx;
    		font-size: 25rpx;
    		color: #fbf3f3;
    		box-shadow: 5rpx 5rpx 15rpx 8rpx #bdbfbb;
    	}

    	.box_A {
    		// background-color: #a9e1ff;
    		background-color: #d3ecf9;
    		padding-top: 10rpx;
    		margin-top: 30rpx;
    		box-shadow: 0rpx 5rpx 15rpx 8rpx #e1e2df;
    		border-radius: 10rpx;

    		.box_B {
    			background-color: #def4ff;
    			margin: 18rpx;
    			height: 450rpx;
    			border-radius: 10rpx;
    			// box-shadow: 5rpx 5rpx 15rpx 8rpx #e7e7e7;

    			.box_B_1 {
    				height: 85rpx;

    				.box_B_2 {
    					font-size: 35rpx;
    					line-height: 85rpx;
    					margin: 0 15rpx;
    					display: block;
    				}
    			}

    			.box_B_3 {
    				margin: 0 10rpx;
    				height: 50rpx;
    				font-size: 25rpx;
    				line-height: 50rpx;
    				color: rgb(175, 175, 175);

    				.box_B_3_1 {
    					font-size: 30rpx;
    					float: right;
    					color: #000;
    				}
    			}
    		}

    		.butn {
    			line-height: 80rpx;
    			text-align: center;
    			width: 350rpx;
    			height: 80rpx;
    			display: inline-block;
    			margin: 25rpx 10rpx;
    			border-radius: 90rpx;
    			color: #ffffff;
    			transition: all 0.1s cubic-bezier(0, 1.53, 56, 1.11);
    		}
    	}

    	.Box_C {
    		border-top: 1px solid #f0f0f0;
    		border-radius: 20rpx;
    		background-color: #e5f9ff;
    		box-shadow: 5rpx 5rpx 15rpx 8rpx #e7e7e7;
    		// height: 300rpx;
    		margin-bottom: 25rpx;

    		.Box_C_1 {
    			float: left;
    			padding: 10rpx 0;
    		}

    		.Box_C_2 {
    			margin-left: 180rpx;
    		}
    	}

    	.search-bar {
    		line-height: 100rpx;
    		height: 100rpx;
    		background-color: #ececec;
    		border-radius: 50rpx;
    		margin: 10rpx 15rpx;
    	}

    	.input {
    		margin-left: 30rpx;
    		height: 100rpx;
    		width: 60%;
    		outline: none;
    		display: inline-block;
    	}

    	.button {
    		color: skyblue;
    		font-size: 27rpx;
    		height: 100rpx;
    		display: inline-block;
    		float: right;
    		margin: 0 35rpx;
    	}

    	.Department_right {
    		height: 80rpx;
    		line-height: 80rpx;
    		width: 60%;
    		float: right;
    		color: #000;
    	}

    	.no {
    		display: none;
    	}

    	.nothing {
    		text-align: center;
    		color: #afcbdc;
    		height: 50rpx;
    		margin: 50rpx auto;
    		border-bottom: 1px solid #afcbdc;
    		width: 40%;
    	}

    	.head {
    		border-radius: 100%;
    		width: 120rpx;
    		height: 120rpx;
    		background-color: #5bc724;
    		line-height: 120rpx;
    		text-align: center;
    		margin: 0 20rpx;
    	}

    	.Yue {
    		text-align: center;
    		display: inline-block;
    		float: right;
    		border-radius: 30rpx;
    		background-color: #40cf8b;
    		width: 150rpx;
    		height: 50rpx;
    		color: white;
    		line-height: 50rpx;
    		margin-right: 30rpx;
    	}

    	.adept {
    		margin: 10rpx;
    		display: inline-block;
    		color: #cecece;
    		border-radius: 10rpx;
    		padding: 0 10rpx;
    		letter-spacing: 0.2em;
    	}

    	.Box4 {
    		background-color: #def4ff;
    		border-radius: 15rpx;
    		box-shadow: 0rpx 5rpx 15rpx 8rpx #e1e2df;
			
    		.Box4_A {
				line-height: 130rpx;
    			.Box4_A_1 {
					float: left;
    				width: 130rpx;
    				height: 130rpx;
    				border-radius: 20rpx;
    				background-color: #e4f0fe;
    				margin: 20rpx 0 0 20rpx;
    			}

    			.Box4_A_2 {
					// float: left;
					line-height: 130rpx;
    				// background-color: #3161fe;
    				display: inline-block;
    				// margin: 0 0 15rpx 25rpx;
					margin: 20rpx 0 0 20rpx;
    				font-size: 40rpx;
    			}
    		}

    		.Box4_B {
    			margin-left: 170rpx;
    			word-break: break-all;
    			padding-bottom: 10rpx;

    			.Box4_B_1 {
    				display: inline-block;
    				margin: 15rpx 30rpx 0 0;
    				color: #464646;
    				font-size: 28rpx;

    				.Box4_B_2 {
    					display: inline-block;
    					color: #9d9d9d;
    				}
    			}
    		}
    	}

    	.Box5 {
    		display: inline-block;
    		width: 100%;
    		height: 130rpx;
    		padding: 15rpx 0;
    		border-bottom: 1px solid #adadad;
    		margin: 15rpx 10rpx 0 10rpx;
    		background-color: #def4ff;
    		border-radius: 10rpx;

    		.Box5_mds {
    			width: 130rpx;
    			height: 130rpx;
    			border-radius: 30rpx;
    			background-color: #5bc724;
    			float: left;
    			text-align: center;
    			line-height: 130rpx;
    			margin-left: 10rpx;
    		}

    		.add {
    			float: right;
    			width: 40rpx;
    			height: 40rpx;
    			border-radius: 100%;
    			background-color: white;
    			border: 1px solid black;
    			color: black;
    			font-size: 30rpx;
    			text-align: center;
    			line-height: 35rpx;
    			margin-top: 35rpx;
    			margin-right: 35rpx;
    		}
    	}

    	.Box6 {
    		box-shadow: 0rpx 5rpx 15rpx 8rpx #e1e2df;
    		background-color: #def4ff;
    		padding: 15rpx;
    		border-radius: 20rpx;
    		margin: 10rpx 15rpx 25rpx 15rpx;

    		.Box6_1 {
    			background-color: #5bc724;
    			width: 210rpx;
    			height: 210rpx;
    			border-radius: 100%;
    			margin: 15rpx;
    			float: left;
    		}

    		.Box6_2 {
    			word-break: break-all;
    			margin-left: 250rpx;
    			height: 240rpx;
    			margin-top: 15rpx;

    			.Box6_2_1 {
    				margin-left: 15rpx;
    				display: inline-block;
    				font-size: 35rpx;
    				font-weight: 600;
    			}

    			.Box6_2_2 {
    				float: right;
    				background-color: #2ccf68;
    				background-image: linear-gradient(to right, #00cf53, #4fcf7e, #7ccf73);
    				color: white;
    				border-radius: 25rpx;
    				width: 175rpx;
    				height: 50rpx;
    				text-align: center;
    				line-height: 50rpx;
    				font-size: 30rpx;
    			}

    			.Box6_2_3 {
    				margin: 15rpx 0;
    				font-size: 28rpx;
    				font-weight: 400;


    			}

    			.Box6_2_4 {
    				margin: 15rpx 0;
    				font-size: 25rpx;
    				color: #adadad;
    			}

    			.Box6_2_5 {
    				margin: 15rpx 0;
    				color: #ff9c11;
    				font-size: 25rpx;

    				.Box6_2_5_1 {
    					display: inline-block;
    					font-size: 40rpx;
    				}

    				.Box6_2_5_2 {
    					display: inline-block;
    					color: #bdbdbd;
    					margin-left: 35rpx;
    					text-decoration: line-through;
    				}
    			}
    		}
    	}
    </style>